<script lang="ts" setup>
import { ref } from 'vue';
import { Image } from 'ant-design-vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';

const props = defineProps<{
  images: string[];
  width?: number;
  height?: number;
}>();

const currentIndex = ref(0);

const prev = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};

const next = () => {
  if (currentIndex.value < props.images.length - 1) {
    currentIndex.value++;
  }
};
</script>

<template>
  <div class="image-gallery">
    <div v-if="images && images.length > 0">
      <!-- 主图 -->
      <div class="relative">
        <Image.PreviewGroup>
          <Image
            :src="images[currentIndex]"
            :width="width || '100%'"
            :height="height || 400"
            class="object-cover rounded"
          />
          
          <!-- 隐藏的其他图片供预览 -->
          <Image
            v-for="(img, idx) in images.filter((_, i) => i !== currentIndex)"
            :key="idx"
            :src="img"
            style="display: none;"
          />
        </Image.PreviewGroup>
        
        <!-- 左右切换按钮 -->
        <button
          v-if="currentIndex > 0"
          @click="prev"
          class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-70"
        >
          <LeftOutlined />
        </button>
        <button
          v-if="currentIndex < images.length - 1"
          @click="next"
          class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-70"
        >
          <RightOutlined />
        </button>
      </div>
      
      <!-- 缩略图 -->
      <div class="flex space-x-2 mt-3 overflow-x-auto">
        <img
          v-for="(img, idx) in images"
          :key="idx"
          :src="img"
          :class="['w-20 h-20 object-cover rounded cursor-pointer', idx === currentIndex ? 'border-2 border-blue-500' : 'opacity-60 hover:opacity-100']"
          @click="currentIndex = idx"
        />
      </div>
    </div>
    <div v-else class="text-gray-400 text-center py-8">
      暂无图片
    </div>
  </div>
</template>

